<template>
  <lay-json-schema-form
    class="json-schema-form"
    :model="model"
    :space="0"
    :schema="schema"
    useCN
    :isGenCommentEl="false"
    ref="formRef"
  >
    <template
      v-for="(item, index) in customJsonSchema"
      :key="index"
      #[item]="{ schemaKey, schemaValue, model }"
    >
      <lay-input
        allow-clear
        v-model:model-value="model[`${item}-copyText`]"
        @click="handleClickCustomInput(schemaValue, item)"
        @clear="() => (model[`${item}`] = null)"
      ></lay-input>
    </template>
    <!-- type 30 -->
    <template #customCheckbox="{ schemaValue, model }">
      <lay-checkbox
        value="1"
        v-model="model[schemaValue.code]"
        skin="primary"
      ></lay-checkbox>
    </template>
    <template #customRange="{ schemaValue, model }">
      <CustomRang :schemaValue="schemaValue" :model="model"></CustomRang>
    </template>
    <template #devOperate>
      <div
        style="padding-left: 10px"
        v-if="schema && JSON.stringify(schema) != '{}'"
      >
        <lay-button @click="handleQuery" type="primary">查询</lay-button>
        <lay-button @click="handleReset" type="primary">重置</lay-button>
        <a
          v-if="Object.keys(schema).length > 4"
          @click="toggle"
          style="margin-left: 20px; color: #409eff"
          >{{ expand ? "收起" : "展开" }}
          <lay-icon v-if="expand" type="layui-icon-up"></lay-icon>
          <lay-icon v-else type="layui-icon-down"></lay-icon
        ></a>
      </div>
    </template>
  </lay-json-schema-form>
</template>

<script setup lang="ts">
import type { FormCallback } from "@layui/json-schema-form/types/component/form/types";
import { ref, watch } from "vue";

import CustomRang from "@/components/rang/index.vue";

const props = defineProps({
  model: {
    type: Object,
    default: () => ({}),
  },
  schema: {
    type: Object,
    default: () => ({}),
  },
  customJsonSchema: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(["on-query", "on-reset", "custom-operate"]);

const expand = ref(false);

const formRef = ref();

const handleQuery = () => {
  emit("on-query");
};
const handleReset = () => {
  emit("on-reset");
  formatSpecialValue();
};

const formatSpecialValue = () => {
  Object.keys(props.model).forEach((item) => {
    if (item.includes("-copyText")) {
      // eslint-disable-next-line vue/no-mutating-props
      props.model[item] = null;
    }
  });
};

const toggle = () => {
  expand.value = !expand.value;
};

const handleClickCustomInput = (schemaValue, item) => {
  emit("custom-operate", schemaValue, item);
};

watch(
  () => expand.value,
  (val) => {
    const arr = Object.keys(props.schema);

    arr.forEach((item, index) => {
      if (index >= 3 && index !== arr.length - 1) {
        // eslint-disable-next-line vue/no-mutating-props
        props.schema[item].hidden = !val;
      }
    });
  },
);

const validate = (
  fields?: string | string[] | FormCallback | null,
  callback?: FormCallback | null,
) => {
  return formRef.value.validate(fields, callback);
};

/**
 * 重置字段
 */
const resetFields = () => {
  return formRef.value.resetFields();
};

/**
 * 清除验证
 */
const clearValidate = (fields?: string | string[]) => {
  return formRef.value.clearValidate(fields);
};

defineExpose({ validate, resetFields, clearValidate });
</script>
